<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>datagrid</title>
    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../../node_modules/animate.css/animate.min.css">
    <link rel="stylesheet" href="../kungeekui.css">
</head>

<body>
    <div class="container">
        <h3>table 1</h3>
        <table id="table1" class="kungeekui-datagrid table hahatable" kg-data-source="qzkhxxLqPage2.do" kg-data-option="fieldDrag:true;fixedThead:true;onlyCheckOne:false;minItemNums:2;paging:true;hasCheckBox:'true';" kg-data-minItemNums="5">
            <thead>
                <tr>
                    <th kg-data-option="field:'address';fixed:'left';width:120px" kg-data-field="address">潜在客户名称</th>
                    <th kg-data-option="field:'address';width:180px" kg-data-field="address">潜在客户名称</th>
                    <th kg-data-option="field:'lxr';width:120px;" kg-data-field="lxr">联系人</th>
                    <th kg-data-option="field:'lxer';width:80px;">数据80px</th>
                    <th kg-data-option="field:'lxer';">数据</th>
                    <th kg-data-option="field:'lxer';">数据</th>
                    <th kg-data-option="field:'lxer';">数据</th>
                    <th kg-data-option="field:'mphone';fixed:'right';" kg-data-field="mphone">手机号码</th>
                </tr>
            </thead>
        </table>
        <button type="button" class="btn btn-primary" id="refresh1">刷新table1数据</button>
        <button type="button" class="btn btn-primary" id="getSelected1">获取table1选中数据</button>
        <button type="button" class="btn btn-primary" id="cancelSelected1">取消table1选中数据</button>
        <button type="button" class="btn btn-primary" id="loadData1">加载table1数据</button>
        <button type="button" class="btn btn-primary" id="putData1">替换table1数据</button>
        <button type="button" class="btn btn-primary" id="putData2">替换table1数据</button>
        <button type="button" class="btn btn-primary" id="openmask1">创建蒙版</button>
        <button type="button" class="btn btn-primary" id="openmask2">取消蒙版</button>
        <h3>table 2</h3>
        <table id="table2" class="kungeekui-datagrid table hahatable" kg-data-option="fieldDrag:true;fixedThead:true;hasOrder:true;hasCheckBox:'true';trAnimation:'bounceIn';onlyCheckOne:true">
            <thead>
                <tr>
                    <th kg-data-field="address">潜在客户名称</th>
                    <th kg-data-option="field:'lxr';align:right" kg-data-field="lxr">联系人</th>
                    <th kg-data-option="field:'mphone';" kg-data-field="mphone" kg-data-width="145px">手机号码</th>
                    <th kg-data-option="field:'lastVisitRecord';" kg-data-field="lastVisitRecord">最后拜访结果</th>
                </tr>
            </thead>
        </table>
        <button type="button" class="btn btn-primary" id="refresh2">更新table2数据</button>
        <button type="button" class="btn btn-primary" id="getSelected2">获取table2选中条目</button>
        <button type="button" class="btn btn-primary" id="cancelSelected2">取消table2选中数据</button>
        <button type="button" class="btn btn-primary" id="openmask3">创建蒙版</button>
        <button type="button" class="btn btn-primary" id="openmask4">取消蒙版</button>
    </div>

    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../kungeekui.js"></script>
    <script>
        $(document).ready(function() {
            $('#getSelected1').on('click', function() {
                var a = $('#table1').getSelected();
                console.log(a);
            })
            $('#cancelSelected1').on('click', function() {
                $('#table1').cancelSelected();
            })
            $('#cancelSelected2').on('click', function() {
                $('#table2').cancelSelected();
            })
            $('#refresh1').on('click', function() {
                $('#table1').refresh();
            })
            $('#refresh2').on('click', function() {
                $('#table2').refresh();
            })
            $('#loadData1').on('click', function() {
                $('#table1').loadData('qzkhxxLqPage2.do');
            })
            $('#openmask1').on('click', function() {
                $('#table1').mask('show');
            })
            $('#openmask2').on('click', function() {
                $('#table1').mask('hide');
            })
            $('#openmask3').on('click', function() {
                $('#table2').mask('show');
            })
            $('#openmask4').on('click', function() {
                $('.hahatable').refresh().mask('hide');
            })
            $('#putData1').on('click', function() {
                var tableData = [{
                    _id: '2345YTHGFBVD546YT',
                    address: '许昌县陈曹乡陈曹街',
                    lxr: '党继伟',
                    mphone: '1352001256',
                    lastVisitRecord: '拒接'
                }, {
                    _id: '2345YTHGFBVD546YT',
                    address: '许昌县陈曹乡陈曹街',
                    lxr: '党继伟',
                    mphone: '1352001256',
                    lastVisitRecord: '拒接'
                }, {
                    _id: '2345YTHGFBVD546YT',
                    address: '许昌县陈曹乡陈曹街',
                    lxr: '党继伟',
                    mphone: '1352001256',
                    lastVisitRecord: '拒接'
                }];
                $('#table1').putData(tableData);
            })
            $('#putData2').on('click', function() {
                var tableData = [{
                    _id: '2345YTHGFBVD546YT',
                    address: '许昌县陈曹乡陈曹街',
                    lxr: '党继伟',
                    mphone: '1352001256',
                    lastVisitRecord: '拒接'
                }];
                $('#table1').putData(tableData);
            })
            $('#getSelected2').on('click', function() {
                var a = $('#table2').getSelected();
                console.log(a);
            })

            // setTimeout(function() {
            //     $('#table1').addField('操作', function(trData) {
            //         if (trData.lxr == "张东亮") {
            //             return '<button type="button" class="btn btn-primary btn-xs" class="alertNameBtn" onclick="fn()" >"张东亮按钮"</button>'
            //         }
            //         return '<button type="button" class="btn btn-primary btn-xs" class="alertNameBtn" >"不是张东亮按钮"</button>'
            //     });
            // }, 2000)
            $('#table1').addField('操作', function(trData) {
                if (trData.lxr == "张东亮") {
                    return '<button type="button" class="btn btn-primary btn-xs" class="alertNameBtn" onclick="fn()" >"张东亮按钮"</button>'
                }
                return '<button type="button" class="btn btn-primary btn-xs" class="alertNameBtn" >"不是张东亮按钮"</button>'
            });

            //setTimeout(function() {
            $('#table2').addField({
                index: 4,
                title: '操作哈哈',
                width: 80
            }, function(trData) {
                return '<div style="width:100%;white-space: initial;">23撒打算打算打算打算的阿萨斯的</div>'
            }, 3);

            $('.kungeekui-datagrid').addField({
                title: '一起添加列吧',
                width: 80,
            }, function(trData) {
                return '所有表格一起添加列吧'
            });
            // }, 2000)



            // $('#table2').addField('查看', function(trData) {
            //     return 2
            // }, 3);
            $('#table1').modifyField('lxr', function(trData) {
                return trData.lxr + '修改2'
            });
            $('.kungeekui-datagrid').modifyField('lxr', function(trData) {
                return trData.lxr + '修改3'
            });





        });

        function fn() {
            alert(2)
        }
    </script>
</body>

</html>